<template>
	<view class="main">
		<view class="search-head">
			<view class="abck" @click="toAvailable">
				<image class="back" src="@/static/tabbar/back.png" alt="back"></image>
				返回
			</view>
			<view class="top-class">
				订单号查询
			</view>
		</view>
		<view class="search-body">
			<u-input class="input-number" placeholder="请输入订单号" v-model="searchText" @confirm="doSearch"/>
			<view class="confirm" :style="grayColor" @click="doSearch">
				确定
			</view>
		</view>
		<div class="empty" v-if="orderList == [] || orderList == '' || orderList == null">
				<view>
				  <image style="width: 320rpx; height: 240rpx; margin-left: 30rpx;" src="@/static/nodata.png">
			
				  </image>
				</view>
				<view>
				  <p>没有找到相关的订单信息</p>
				  <p>可以试试其他订单哦</p>
				</view>
				
		</div>
		<div v-if="
		    !(orderList == [] || orderList == '' || orderList == null)
		  "
					class="all-box">
			<div class="card-content">
				<div class="card-top">寄件信息</div>
				<div class="card-name">寄件姓名：</div>
				<div class="card-detail">{{this.orderList[0].orderFromName}}</div>
				<br>
				<div class="card-name">寄件电话：</div>
				<div class="card-detail">{{this.orderList[0].orderFromPhone}}</div>
				<br>
				<div class="card-name">寄件地址：</div>
				<div class="card-detail" style="padding-bottom: 30rpx;">{{this.orderList[0].orderFromAddress}}</div>
				<br>
			</div>
			<div class="card-content">
				<div class="card-top">收件信息</div>
				<div class="card-name">收件姓名：</div>
				<div class="card-detail">{{this.orderList[0].orderToName}}</div>
				<br>
				<div class="card-name">收件电话：</div>
				<div class="card-detail">{{this.orderList[0].orderToPhone}}</div>
				<br>
				<div class="card-name">收件地址：</div>
				<div class="card-detail" style="padding-bottom: 30rpx;">{{this.orderList[0].orderToAddress}}</div>
				<br>
			</div>
			<div class="goods-bottom">
				<div class="goods-weight">
					<div style="float: left;margin-top: 26rpx;margin-left: 8rpx;"><image src="/static/weight.png" alt="" style="width: 40rpx;height: 40rpx;"></image></div>
					<div class="goods-name">订单重量：</div>
					<div class="goods-detail">{{this.orderList[0].orderWeight}}</div>					
				</div>
				<div class="goods-price" style="margin-left: 10%;">
					<div style="float: left;margin-top: 26rpx;margin-left: 8rpx;"><image src="/static/money.png" alt="" style="width: 40rpx;height: 40rpx;"></image></div>
					<div class="goods-name">订单价格：</div>
					<div class="goods-detail">{{this.orderList[0].orderPrice}}</div>					
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import { listOrder,updateOrder} from "@/api/order";
	import app from "@/App.vue";
	export default {
		data(){
			return {
				searchText:undefined,
				grayColor:'color:#d0d0d0',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderId: undefined,
					orderNumber: undefined,
					postmanPhone: undefined,
					partyPhone: undefined,
					orderParty: undefined,
					orderPostman: undefined,
					orderDept: undefined
				},
				orderList:[]
			}
		},
		methods:{
			toAvailable(){
				uni.navigateBack({
					delta:1
				})
			},
			doSearch(){
		
				this.queryParams.orderNumber=parseFloat(this.searchText) 
	
				console.log(this.queryParams)
				listOrder(this.queryParams).then(res => {
					console.log(res)
				  this.orderList = res.rows;
				  
				})	
			}
		},
		watch:{
			searchText(){
				if(this.searchText==''||this.searchText==null||this.searchText==undefined)
					this.grayColor = 'color:#d0d0d0'
				else
				this.grayColor = 'color:black'
			}
		}
	}
</script>
	
<style>
	.top-class{
		text-align: center;
		font-size: 36rpx;
		padding-bottom: 30rpx;
		padding-top: 0rpx;
	}
	.abck{
		margin-left: 20rpx;
		padding-top: 78rpx;
		margin-bottom: -28rpx;
	}
	.search-head{
		background-color: #ffaa83;
		height: 160rpx;
	}
	.card-content{
		background: url('@/static/backGround.png');
		  height: 100%;		
		  width: 90%;
		  margin-left: 50rpx;
		  margin-bottom: 30rpx;
		  border-radius: 20rpx;
		  background-size: cover;//全屏展示
	}
	.card-top{
		padding-top: 20rpx;
		padding-left:20rpx;
		font-size: 36rpx;
	}
	.card-name{
		padding-top: 28rpx;
		padding-left:40rpx;
		font-size: 34rpx;	
		display: inline-block;
	}
	.card-detail{
		padding-top: 28rpx;
		padding-left:15rpx;
		font-size: 30rpx;	
		color: #7e7e7e;
		display: inline-block;		
	}
	.goods-bottom{
		margin-left: 12%;
		margin-top: 60rpx;
	}
	.goods-weight{
		background-color: #ffba6b;
		border-radius: 20rpx;
		display: inline-block;
		width: 260rpx;
		height: 100rpx;
	}
	.goods-price{
		background-color: #ff806a;
		border-radius: 20rpx;
		display: inline-block;
		width: 260rpx;
		height: 100rpx;
	}
	.goods-name{
		display: inline-block;
		/* padding-top: 26rpx; */
		padding-left: 5rpx;
		margin-top: 26rpx;
	}
	.goods-detail{
		display: inline-block;
	}
	.search-body {
		height: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		/* align-items: center; */
	}
	.input-number {
		display: inline-block;
		background-color: #fff;
		/* background-color: greenyellow; */
		/* width: 50rpx; */
		height: 40rpx;
		/* line-height: 30rpx; */
		border-radius: 15rpx;
/* 		margin-top:35rpx;
		margin-left: 90rpx;
		margin-bottom: 30rpx; */
		margin: 60rpx 40rpx 30rpx 90rpx;
	}
	.confirm {
		margin-top: 70rpx;
		margin-right: 80rpx;
		/* margin-right: 60rpx; */
		/* float: right; */
		/* display: inline-block; */
	}
	.back {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -9rpx;
	}
	.empty {
	  padding-top: 300rpx;
	  color: #999999;
	  text-align: center;
	  /deep/ .u-image {
	    width: 346rpx;
	    height: 304rpx;
	  }
	  }
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
</style>